<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>ALLADYN Project homepage</title>
<link rel="stylesheet" href="../al.css" type="text/css">
<script src="../js/Alladyn.js" type="text/javascript"></script>
<script src="../js/subpaths.js" type="text/javascript"></script>
</head>

<body background="../img/bg.gif" onload="Alladyn();main()">
<div id="menu1" style="position:absolute; left:-100; top:290; z-index:3"><a href="contact.html"><img src="../img/m_feed_eng.gif" width="119" height="20"  border="0" alt=""/></a></div>
<div id="menu2" style="position:absolute; left:-100; top:130; z-index:3"><a href="desc.html"><img src="../img/m_desc_eng.gif" width="119" height="20"  border="0" alt=""/></a></div>
<div id="menu3" style="position:absolute; left:-100; top:170; z-index:3"><a href="gallery.html"><img src="../img/m_gallery_eng.gif" width="119" height="20"  border="0" alt=""/></a></div>
<div id="menu4" style="position:absolute; left:-130; top:210; z-index:3"><a href="docs.html"><img src="../img/m_docs_eng.gif" width="119" height="20"  border="0" alt=""/></a></div>
<div id="menu5" style="position:absolute; left:-100; top:250; z-index:3"><a href="down.html"><img src="../img/m_down_en.gif" width="119" height="20"  border="0" alt=""/></a></div>
<div id="menu6" style="position:absolute; left:-100; top:90; z-index:3"><a href="about.html"><img src="../img/m_about_eng.gif" width="119" height="20" border="0"  alt=""/></a></div>
<div id="blue1" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="blue2" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="blue3" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="blue4" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="blue5" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="blue6" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="alll" style="position:absolute; left:312; top:-50; z-index:8"><img src="../img/name_half1.gif" width="104" height="26"/></div>
<div id="allr" style="position:absolute; left:313; top:-50; z-index:8"><img src="../img/name_half2.gif" width="101" height="26"/></div>
<div id="poziom" style="position:absolute; left:0; top:-50; z-index:7"><img src="../img/blue_d.gif" width="780" height="34"/></div>
<div id="pozioms" style="position:absolute; left:0; top:-50; z-index:7"><img src="../img/blue_d.gif" width="780" height="18"/></div>
<div id="pozioms2" style="position:absolute; left:0; top:-20; z-index:7"><img src="../img/blue_mid.gif" width="780" height="6"/></div>
<div id="pozioms3" style="position:absolute; left:0; top:-20; z-index:7"><img src="../img/blue_mid.gif" width="780" height="3"/></div>
<div id="dhdsb" style="position: absolute; left: 13; top: -50; z-index: 10"><img src="../img/dhdsbig.gif" width="574" height="17"/></div>

<div id="title" style="position: absolute; left: 140; top: -50; z-index: 2"><img src="../img/t_docs.gif" width="562" height="35"></div>
<div id="docsmenu" class="content" style="position: absolute; left: 140; top: 160; z-index: 2; color: #8888AA; width: 562; text-align: center;">[<a href="docs3.html">&lt; Previous chapter</a>] [<a href="docs.html">Table of contents</a>] [<a href="docs5.html">Next chapter &gt;</a>]</div>

<div class="content" id="content" style="position: absolute; left: 140; top: 200; width:562; z-index: 2">
<div class="content">
	<a name="r4"></a><span class="header">4. Positioning, changing the appearance and content of layers - new objects</span><br />
	Alladyn introduces mechanisms for fast and easy changing of appearance, position and content of respective layers. Amplifications introduced by Alladyn have the "v" prefix in their name.<br /><br />
	<a name="r41"></a><span class="bold">4.1. Positioning</span> - method <span class="b">vpos(left,top)</span>.<br />
	This method ensures fast layer position change. It is an equivalent of simultanous use of <span class="i">style.left</span> and <span class="i">style.top</span>. It is ascribed, like other Alladyn ampifications, directly to the layer object, not to the sub-object <span class="i">style</span>, which contains standard DOM properties, allowing you to shorten the time to access it.<br /><br />
	Example of use:
</div>
<div class="ex1">
	vlay.nameoflayer.vpos(100,50)
</div>
<div class="content">
	Without Alladyn, it would look like this:
</div>
<div class="ex2">
	<span class="exh">In Internet Explorer 4 and newer:</span><br />
	document.all.nameoflayer.style.top = 100<br />
	document.all.nameoflayer.style.left = 50<br />
	<br />
	<span class="exh">In Netscape 4.xx:</span><br />
	document.layers.nameoflayer.top = 100<br />
	document.layers.nameoflayer.left = 50<br />
	<br />
	<span class="exh">In Netscape 6:</span><br />
	layer = document.getElementById("nameoflayer")<br />
	layer.style.top = 100<br />
	layer.style.left = 50<br />
</div>
<div class="content">
	<a href="docs_ex41.html">Example 4.1</a> - this example shows layer positioning with <span class="i">vpos</span>.<br /><br />
	<a name="r42"></a><span class="bold">4.2. Clipping</span> - method <span class="b">vclip(top,right,bottom,left)</span>.<br />
	This method allows you to clip the layer. The parameters are the numbers denominating the values of respectively upper, right, bottom and left edges of the clip. It is easy to memorize those parameters (compatible with W3C's recommendations) using the clock principle: "we start with the twelve o'clock and move with the hour hand".
	Example of use:
</div>
<div class="ex1">
	vlay.nameoflayer.vclip(10,100,200,0)
</div>
<div class="content">
	Without Alladyn, we would have to do it separately for each browser:
</div>
<div class="ex2">
	<span class="exh">In Internet Explorer 4 and newer:</span><br />
	document.all.nameoflayer.style.clip = "rect(10 100 200 0)"<br />
	<br />
	<span class="exh">In Netscape 4.xx:</span><br />
	document.layers.nameoflayer.clip.top = 10<br />
	document.layers.nameoflayer.clip.right = 100<br />
	document.layers.nameoflayer.clip.bottom = 200<br />
	document.layers.nameoflayer.clip.left = 0<br />
	<br />
	<span class="exh">In Netscape 6:</span><br />
	layer = document.getElementById("nameoflayer")<br />
	layer.style.clip = "rect(10 100 200 0)"<br />
</div>
<div class="content">
	Because in IE and NS6 this parameter is a string (it's compatible with W3C's recommendations), to clip to the values contained in variables t,r,b,l we would have to use an uncomfortable construction to generate the string:
</div>
<div class="ex2">
	<span class="exh">In Internet Explorer 4 and newer:</span><br />
	document.all.nameoflayer.style.clip = "rect(" + t + " " + r + " " + b + " " + l")"<br />
	<br />
	<span class="exh">In Netscape 6:</span><br />
	layer = document.getElementById("nameoflayer")<br />
	layer.style.clip = "rect(" + t + " " + r + " " + b + " " + l")"<br />
</div>
<div class="content">
	While in Alladyn it is done in the easiest possible way:
</div>
<div class="ex1">
	vlay.nameoflayer.vclip(t,r,b,l)
</div>
<div class="content">
	<a href="docs_ex421.html">Example 4.2.1</a> - this example shows layer clipping using <span class="i">vclip</span>.<br />
	<a href="docs_ex422.html">Example 4.2.2</a> - simple scroll that uses <span class="i">vclip</span>.<br /><br />
	<a name="r43"></a><span class="bold">4.3. Dynamic layer content change</span> - method <span class="b">vHTML(content)</span>.<br />
	With this method, we can change the content of any layer at any time.<br />
	It is very easy to use:
</div>
<div class="ex1">
	vlay.nameoflayer.vHTML("layer content")
</div>
<div class="content">
	Without Alladyn, we would have to do it separately for each browser:
</div>
<div class="ex2">
	<span class="exh">In Internet Explorer 4 and newer:</span><br />
	document.all.nameoflayer.innerHTML = "layer content"<br />
	<br />
	<span class="exh">In Netscape 4.xx:</span><br />
	document.layers.nameoflayer.document.open()<br />
	document.layers.nameoflayer.document.write("layer content")<br />
	document.layers.nameoflayer.document.close()<br />
	<br />
	<span class="exh">In Netscape 6:</span><br />
	layer = document.getElementById("nameoflayer")<br />
	layer.innerHTML = "layer content"<br />
</div>
<div class="content">
	<a href="docs_ex43.html">Example 4.3</a> - this example shows layer content change using <span class="i">vHTML</span>.<br /><br />
	<a name="r44"></a><span class="bold">4.4. Transparency</span> - method <span class="b">vopacity(opacity)</span>.<br />
	With this method you can set the layer's transparency. Parameter <span class="i">opacity</span> sets the grade of visibility of the layer and can take values from 0 to 100.<br />
	In Netscape 4.x, which doesn't support transparency, the two-step transparency emulation is used. Layers are shown (in full visibility - the opacity value is presumed as 100) for the opacity value equal or bigger than 50. For the values below 50, layers are not visible (the opacity value is presumed as 0). 50 is a default value of defined transparency grade in NS4 - it is possible to change it for each layer or globally for all layers. The properties used for it are <span class="i">vlay.nameoflayer.vol</span> and <span class="i">STPE.vol</span>, which are described in chapter 7.<br /><br />
	Example of use:
</div>
<div class="ex1">
	vlay.nameoflayer.vopacity(75)
</div>
<div class="content">
	To get the transparency effect without Alladyn, we would have to do something like this:
</div>
<div class="ex2">
	<span class="exh">In Internet Explorer 4 and newer:</span><br />
	document.all.nameoflayer.style.filter="alpha(opacity=75)"
	<br /><br />
	<span class="exh">In Netscape 6:</span><br />
	layer = document.getElementById("nameoflayer")<br />
	layer.style.MozOpacity = 75/100<br />
</div>
<div class="content">
	<a href="docs_ex44.html">Example 4.4</a> - this example shows the use of <span class="i">vopacity</span>.<br /><br />
</div>
<br />
<div class="content">	<a name="r45"></a><span class="bold">4.5 Layer creating</span> - mthod <span class"b">STPE.N(name,width,parent)</span>.<br />	With this method You can create new layers. Name - it is unique name of layer in <span class="i">vlay</span> array. Second
	parameter is width of new layer. If You want new layer to be added to another, put her handler as third parameter. Function return handler to new layer.
	Use:</div><div class="ex1">	STPE.N("new",100);<br />	or<br />	STPE.N("new",100,vlay["parent"]);<br /></div><div class="content">	To create new layer without Alladyn You have to:</div><div class="ex2">	<span class="exh">In Internet Explorer 4 up:</span><br />    document.body.insertAdjacentHTML('BeforeEnd','&lt;div id=nazwa style="position:absolute;width:100">&lt;/div&gt;');     <br />    <br />	<span class="exh">In Netscape 6:</span><br />	lay=document.createElement('div');<br />	lay.style.position='absolutne';<br />	lay.style.width=100;<br /><br />	<span class="exh">In Netscape 4:</span><br />	lay=new Layer(100,window);<br />	lay.visibility='show';<br />	<br /></div><br /><br /><div class="content">	<a name="r46"></a><span class="bold">4.6 Access to images</span> - method <span class"b">STPE.I()</span>.<br />	You call this method without any parameters. It return references array to images in document.
	Array hold collection of images existing at the moment, with those whitch was added to document by vHTML. 
	Use:</div><div class="ex1">	STPE.I()["image"].src="new.jpg";<br /></div><div class="content">
<center>[<a href="docs3.html">&lt; Previous chapter</a>] [<a href="docs.html">Table of contents</a>] [<a href="docs5.html">Next chapter &gt;</a>]</center>
</div>
<br />
</div>
</body>
</html>
